<template>
	<div class="Term">
		<div class="title"><i class="iconfont"></i>{{ $t("message.environmentSetting.list.title_12") }}</div>
		<div class="tabs-view">
			<el-button v-for="(i, index) in tabs" :key="i.name" :type="tabPosition == index ? 'primary' : 'default'"
				@click="tabPosition = index">
				{{ i.name }}
			</el-button>
		</div>
		<div class="content" v-if="tabPosition == '0'">
			<!-- 左侧表格 -->
			<div class="left-list">
				<div class="list-title">
					<div class="num-left">No.</div>
					<div class="name">
						{{ $t("message.environmentSetting.term.title") }}
					</div>
				</div>
				<div class="list-content">
					<div v-for="(i, index) in classify_arr" :key="index"
						@click="(acitveItem = index), onLeftTableClick(i)"
						:class="acitveItem == index ? 'active-item item' : 'item'">
						<div class="num-left">{{ i.codOrdr }}</div>
						<div class="name">{{ i.clsName }}</div>
					</div>
				</div>
			</div>
			<!-- 右侧表格 -->
			<div class="right-table">
				<div class="right-table-title">
					<div class="input-wrapper">
						<el-input v-model="clsName" readonly></el-input>
						<el-select v-model="codeValue" @change="selectTableAndTipt" class="ipt"
							v-if="options.length != 0">
							<el-option v-for="item in options" :key="item.code" :label="item.codName"
								:value="item.code">
							</el-option>
						</el-select>
						<el-select v-model="optionsChildValue" @change="selectTable" class="ipt"
							v-if="optionsChild.length != 0">
							<el-option v-for="item in optionsChild" :key="item.key" :label="item.label"
								:value="item.key">
							</el-option>
						</el-select>
						<!-- <el-cascader
              v-model="val_arr"
              :options="options"
              clearable
              :props="{ value: 'code', label: 'codName' }"
            ></el-cascader> -->
					</div>
					<div class="btn-wrapper">
						<el-button @click="showEnDialogFn" :disabled="!code"
							:class="'customerA' == activeBtn ? 'active-button' : ''"
							v-if="(tblName == 'T_CODE_LINECLS') && $hasOption('OPT_IDEM')"
							style="width: auto;padding: 0 12px;font-size: 14px;">
							詳細登録
							<!-- ---111---{{ $store.state.isCurrentNext }} -->
						</el-button>
						<el-button size="mini" @click="sort('top')" style="width: 32px;max-width: 32px"
							:disabled="sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0)"
							:style="{ cursor: sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) ? 'not-allowed' : '' }">
							<i class="el-icon-caret-top"></i>
						</el-button>
						<el-button size="mini" @click="sort('bottom')" style="width: 32px;max-width: 32px"
							:disabled="sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0)"
							:style="{ cursor: sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) ? 'not-allowed' : '' }">
							<i class="el-icon-caret-bottom"></i>
						</el-button>
						<el-button @click="btnOnClick(0)" :class="0 == activeBtn ? 'active-button' : ''"
							:disabled="(tblName == 'T_CODE_PARTS' && optionsChild.length == 0)"
							:style="{ cursor: sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) ? 'not-allowed' : '' }">
							{{ $t("message.environmentSetting.btns.topBtn.save") }}
						</el-button>
						<el-button v-for="(val, _index) in btnValue" :key="val" @click="btnOnClick(_index + 1)"
							:class="_index + 1 == activeBtn ? 'active-button' : ''"
							:disabled="(tblName == 'T_CODE_PARTS' && optionsChild.length == 0) || tableData.length == 0"
							:style="{ cursor: sortType || (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) || tableData.length == 0 ? 'not-allowed' : '' }">
							{{ val }}
						</el-button>
					</div>
				</div>
				<div class="footer">
					<div>{{ caption }}</div>
				</div>
				<ux-grid :data="tableData" :border="true" :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: 'bold',
					padding: 0,
					height: '32px',
					background: '#F5F5F5',
				}" :cell-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '14px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" :row-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '13px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" @selection-change="handleSelectionChange" :checkboxConfig="{ checkMethod: selectable }" @row-click="rowClick"
					@current-change="currentChange" max-height="758" ref="uxGrid" :height="tableHeight"
					v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
					:element-loading-text="$t('message.bhView.loading')">
					<template slot="empty"> No data </template>
					<ux-table-column style="pointer-events:none;" type="checkbox" width="55"> </ux-table-column>
					<ux-table-column property="codName" :title="$t('message.environmentSetting.term.table.column_1')">
						<template slot-scope="scope">
							<el-input v-model="scope.row.codName" class="table-input" v-if="tblName == 'T_CODE_FLW_CLS'"
								@input="scope.row.codName = $setMaxLength(scope.row.codName, 40)">
							</el-input>
							<el-input v-model="scope.row.codName" class="table-input" v-if="tblName == 'T_CODE_WRK_CLS'"
								@input="scope.row.codName = $setMaxLength(scope.row.codName, 100)">
							</el-input>
							<el-input v-model="scope.row.codName" class="table-input"
								v-if="tblName != 'T_CODE_FLW_CLS' && tblName != 'T_CODE_WRK_CLS'"
								@input="scope.row.codName = $setMaxLength(scope.row.codName, 60)">
							</el-input>
						</template>
					</ux-table-column>
					<ux-table-column property="codAbrv" :title="$t('message.environmentSetting.term.table.column_2')">
						<template slot-scope="scope">
							<div class="message-wrapper">
								<p :style="scope.row.tblName == 'T_CODE_ISP_RST' ? `color:${scope.row.codAbrv}` : ''"
									v-if="scope.row.tblName == 'T_CODE_ISP_RST'">
									{{ scope.row.codAbrv }}
								</p>
								<el-input v-model="scope.row.codAbrv" v-if="scope.row.tblName != 'T_CODE_ISP_RST'" class="table-input"
									@input="scope.row.codAbrv = $setMaxLength(scope.row.codAbrv, 20)">
								</el-input>
								<el-color-picker v-if="scope.row.tblName == 'T_CODE_ISP_RST'" :show-alpha="false"
									size="mini" v-model="scope.row.codAbrv"
									:predefine="predefineColors"></el-color-picker>
							</div>
						</template>
					</ux-table-column>
					<ux-table-column property="codSymb" :title="$t('message.environmentSetting.term.table.column_3')">
						<template slot-scope="scope">
							<el-input v-model="scope.row.codSymb" class="table-input"
								@input="scope.row.codSymb = $setMaxLength(scope.row.codSymb, 4)">
							</el-input>
						</template>
					</ux-table-column>
					<ux-table-column property="codSymb" :title="$t('message.environmentSetting.term.table.column_4')">
						<template slot-scope="scope">
							<el-input class="table-input" v-model="scope.row.codOrdr"
								@input="scope.row.codOrdr = Number($setMyNum(scope.row.codOrdr, '4 - 0')) == 0 ? null : $setMyNum(scope.row.codOrdr, '4 - 0')">
							</el-input>
						</template>
					</ux-table-column>
				</ux-grid>
				<div class="footer-wrapper">
					<el-button @click="getDataByTblNameApi(tblName, codeValue, optionsChildValue)"
						:disabled="(tblName == 'T_CODE_PARTS' && optionsChild.length == 0)"
						:style="{ cursor: (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) ? 'not-allowed' : '' }">
						{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
					</el-button>
					<el-button type="primary" class="okBTn" @click="updDataTableClick"
						:disabled="(tblName == 'T_CODE_PARTS' && optionsChild.length == 0)" :style="{
							cursor: (tblName == 'T_CODE_PARTS' && optionsChild.length == 0) ? 'not-allowed' : '',
						}">
						{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
					</el-button>
				</div>
			</div>
		</div>
		<div class="content">
			<Tab1 v-if="tabPosition == '1'"></Tab1>
			<Tab2 v-if="tabPosition == '2'"></Tab2>
			<Tab3 v-if="tabPosition == '3'"></Tab3>
			<Tab4 v-if="tabPosition == '4'"></Tab4>

		</div>

		<term-dialog v-if="term_dialog_flag" @CloseTerm="(term_dialog_flag = false), (activeBtn = null)"
			:tblName="tblName" @updateTableData="
				getDataByTblNameApi(tblName, codeValue, optionsChildValue)
				" :prnCode="prnCode" :grnPrnCode="grnPrnCode" :codeValue="codeValue" :codOrdr='codOrdr'></term-dialog>


		<EnDialog v-if="'customerA' == activeBtn" @CloseTerm="activeBtn = null" :Code="row.code" :MacCode="null"
			footer="footer1">
		</EnDialog>
	</div>
</template>

<script>
import {
	getClassify,
	getClassifyChildren,
	getClassifyChildrenChild,
	getDataByTblName,
	setDataSort,
	delDataByTblName,
	updDataByTblName,
	GetEquipVerify
} from "@/api/api";
import termDialog from "./TabCps/AddTerm";
import $ from "jquery";
import Tab1 from "./Term_Tabs/Tab1.vue";
import Tab2 from "./Term_Tabs/Tab2.vue";
import Tab3 from "./Term_Tabs/Tab3.vue";
import Tab4 from "./Term_Tabs/Tab4.vue";
import _ from 'lodash-es';

import EnDialog from "@/components/Customize/Customer003/views/CustomerAView/btnDialog/EnDialog.vue"

export default {
	name: "Term",
	data() {
		return {
			tabs: [
				{ name: this.$t("message.environmentSetting.list.title_Tab1") },
				{ name: this.$t("message.environmentSetting.list.title_Tab2") },
				{ name: this.$t("message.environmentSetting.list.title_Tab3") },
				{ name: '詳細仕様グループ' },
				{ name: '詳細仕様用語集' },
			],
			tabPosition: 0,
			codeValue: "",
			tableData: [],
			tableDataClone: [],
			multipleSelection: [],
			btnValue: [
				// this.$t("message.bhView.topBtnDownList.addition"),
				this.$t("message.environmentSetting.btns.topBtn.del"),
				// this.$t("message.environmentSetting.btns.topBtn.Excel"),
			],
			activeBtn: null,
			val_arr: [],
			options: [],
			term_dialog_flag: false,
			classify_arr: [],
			acitveItem: null,
			clsName: "",
			codName: "",
			codOrdr: null,
			predefineColors: [
				"#ff4500",
				"#ff8c00",
				"#ffd700",
				"#90ee90",
				"#00ced1",
				"#1e90ff",
				"#c71585",
			],
			caption: null,

			codeList: [],
			sortValue: 0,
			code: "",
			row: null,

			optionsChild: [],
			optionsChildValue: "",

			tblName: "",
			sortType: false,
			tableHeight: 350,

			prnCode: 0,
			grnPrnCode: 0,

			loading: false,
		};
	},
	components: {
		"term-dialog": termDialog,
		Tab1,
		Tab2,
		Tab3,
		Tab4,
		EnDialog
	},
	watch: {
		tabPosition: {
			handler(newName, oldName) {
				console.log('newName', newName);
				if (newName == 0) {
					this.getDataByTblNameApi(this.tblName, this.codeValue, this.optionsChildValue);
				}
			},
			immediate: true,
			deep: true,
		},
		tableData: {
			handler(newName, oldName) {
				console.log('tableData', _.isEqual(this.tableData, this.tableDataClone));

				this.$store.state.isCurrentNext = _.isEqual(this.tableData, this.tableDataClone);
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		showEnDialogFn() {

			let Fn = () => {
				this.activeBtn = 'customerA';
			}
			this.$store.commit("changeIsCurrentFn", Fn);
			console.log(!this.$store.state.isCurrentNext);

			if (!this.$store.state.isCurrentNext) {
				// this.$refs.sysViewInfoRef.saveFn();
				this.updDataTableClick(true);
			} else {
				Fn();
			}
		},
		handleSelectionChange(val) {
			this.codeList = [];
			// this.multipleSelection = val;
			val.forEach((i) => {
				this.codeList.push(i.code);
			});
			console.log(this.codeList);
		},
		btnOnClick(_index) {
			this.activeBtn = _index;
			if (_index === 0) {
				this.term_dialog_flag = true;
			} else if (_index === 1) {
				if (this.codeList.length === 0) {
					this.activeBtn = null;

					this.$alert(this.$t("message.environmentSetting.tip.delInfo"), '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});

					return;
				}
				this.$confirm(this.$t("message.environmentSetting.tip.swInfo"), this.$t("message.environmentSetting.tip.delTitle"), {
					confirmButtonText: "OK",
					cancelButtonText: "Cancel",
					type: "warning",
				})
					.then(() => {
						this.delDataByTblNameApi(this.tblName, this.codeList);
					})
					.catch(() => { })
					.finally(() => {
						this.activeBtn = null;
					});
			}
		},
		getClassifyApi() {
			return getClassify().then((res) => {
				this.classify_arr = [];
				if (res.data.code != 0) {
					return;
				}
				this.classify_arr = res.data.data;
			});
		},
		getClassifyChildrenApi(tblName) {
			let dataJson = {
				tblName: tblName,
			};
			getClassifyChildren(dataJson)
				.then((res) => {
					console.log(res, "getClassifyChildren");
					this.options = [];
					if (res.data.code != 0) {
						this.prnCode = 0;
						this.getDataByTblNameApi(this.tblName, this.codeValue, "");
						return;
					}
					this.options = res.data.data;
					this.codeValue = this.options[0].code;
					this.prnCode = this.options[0].prnCode;
					this.getDataByTblNameApi(this.tblName, this.codeValue, "");
					this.getClassifyChildrenChildApi(this.codeValue, this.tblName);
					console.log(
						this.options,
						"this.options",
						this.prnCode,
						"this.prnCode"
					);
				})
				.catch(() => { });
		},
		getClassifyChildrenChildApi(code, tblName) {
			let dataJson = {
				code: code,
				tblName: tblName,
			};
			getClassifyChildrenChild(dataJson).then((res) => {
				this.optionsChild = [];
				if (res.data.code != 0) {
					this.grnPrnCode = 0;
					return;
				}
				this.optionsChild = res.data.data;
				this.optionsChildValue = this.optionsChild[0].key;
				this.grnPrnCode = this.optionsChild[0].grnPrnCode;
				if (!this.optionsChildValue) return;
				this.getDataByTblNameApi(
					this.tblName,
					this.codeValue,
					this.optionsChildValue
				);
			});
		},
		getDataByTblNameApi(tblName, code, childCode) {

			this.loading = true
			let dataJson = {
				tblName: tblName,
				code: code == "" ? 0 : code,
				childCode: childCode == "" ? 0 : childCode,
			};
			getDataByTblName(dataJson)
				.then((res) => {
					this.tableData = _.cloneDeep([]);
					this.tableDataClone = _.cloneDeep([]);
					if (res.data.code != 0) {
						this.codeList = [];
						return;
					}
					this.tableData = res.data.data;
					setTimeout(() => {
						this.$store.state.isCurrentNext = true;
					}, 500);
					if (this.code) {
						// toggleArr [{ row: row, selected: true || false }]
						// let toggleArr = [];
						// this.codeList.forEach((code) => {
						//   this.tableData.forEach((item) => {
						//     if (code === item.code) {
						//       toggleArr.push({
						//         row: item,
						//         selected: true,
						//       });
						//     } else {
						//       toggleArr.push({
						//         row: item,
						//         selected: false,
						//       });
						//     }
						//   });
						// });
						// this.$refs.uxGrid.toggleRowSelection(toggleArr);
						// console.log(this.$refs.uxGrid);
						let setCurrentRow = null;
						this.tableData.forEach((item) => {
							if (this.code === item.code) {
								setCurrentRow = item;
							}
						});
						this.tableDataClone = _.cloneDeep(this.tableData);
						let _this = this;
						setTimeout(() => {
							_this.$refs.uxGrid.doLayout(true);
							_this.$refs.uxGrid.pagingScrollTopLeft(0, 0);
							_this.$refs.uxGrid.setCurrentRow(setCurrentRow);
							_this.tblName = setCurrentRow.tblName;
							_this.code = setCurrentRow.code;
							_this.tblName = setCurrentRow.tblName;
							_this.sortValue = setCurrentRow.codOrdr;
							// console.log(setCurrentRow)
						}, 100);
					}
				})
				.catch(() => {
					this.tableData = _.cloneDeep([]);
					this.tableDataClone = _.cloneDeep([]);
					this.codeList = [];
				}).finally(() => {
					this.loading = false
				})
		},
		selectTableAndTipt() {
			this.optionsChild = [];
			this.optionsChildValue = "";
			this.grnPrnCode = 0;
			this.options.forEach((item) => {
				if (item.code == this.codeValue) {
					this.prnCode = item.prnCode;
				}
			});
			console.log(this.prnCode, "this.prnCode");
			this.getClassifyChildrenChildApi(this.codeValue, this.tblName);
			this.getDataByTblNameApi(this.tblName, this.codeValue, "");
		},
		selectTable() {
			this.optionsChild.forEach((item) => {
				if (item.key == this.optionsChildValue) {
					this.grnPrnCode = item.grnPrnCode;
				}
			});
			console.log(this.grnPrnCode, "this.grnPrnCode");
			this.getDataByTblNameApi(
				this.tblName,
				this.codeValue,
				this.optionsChildValue
			);
		},
		onLeftTableClick(val) {
			this.codOrdr = val.codOrdr;
			this.clsName = val.clsName;
			this.caption = val.caption;
			this.tblName = val.tblName;
			this.sortValue = "";
			this.optionsChild = [];
			this.options = [];
			this.optionsChildValue = "";
			this.codeValue = "";
			this.code = null;
			this.row = null;
			this.tblName = val.tblName;
			(this.pnrCode = 0),
				(this.grnPrnCode = 0);
			this.getClassifyChildrenApi(val.tblName);
			// this.getDataByTblNameApi(val.tblName, "", "");
			// if (this.options.length == 0) {
			//   this.getDataByTblNameApi(val.tblName, "", "");
			// }
		},
		setDataSortApi(tblName, code, TargetCode, sort, sortType) {
			this.sortType = true;
			let dataJosn = {
				tblName: tblName,
				code: code,
				TargetCode,
				sort: Number(sort),
				sortType: sortType,
			};
			setDataSort(dataJosn)
				.then((res) => {
					// console.log(res,'setDataSortApi');
					// this.codeList = []
					if (res.data.code != 0) {
						return;
					}
					// this.$message.success('Success')
					this.getDataByTblNameApi(
						this.tblName,
						this.codeValue,
						this.optionsChildValue
					);
				})
				.catch(() => {
					// console.error("setDataSort错误");
				})
				.finally(() => {
					this.sortType = false;
				});
		},
		//点击表格行
		rowClick(row) {
			console.log(row, '123123');
			this.sortValue = row.codOrdr;
			this.code = row.code;
			this.row = row;
		},
		currentChange(row) {
			// this.row = row
		},

		sort(position) {
			if (!this.code) {
				this.$alert(this.$t("message.environmentSetting.tip.sortError"), '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return;
			}
			const index = this.tableData.findIndex(item => item.code == this.code); // 获取到当前下表
			console.log('this.row', this.row);
			console.log('index', index);
			if (index == 0 && position == 'top') {
				console.log('最上 return');
				return
			}
			if (index == this.tableData.length - 1 && position == 'bottom') {
				console.log('最下 return');
				return
			}

			if (position === "top") {
				this.setDataSortApi(this.tblName, this.tableData[index].code, this.tableData[index - 1].code, this.sortValue, 1);
			} else if (position === "bottom") {
				this.setDataSortApi(this.tblName, this.tableData[index].code, this.tableData[index + 1].code, this.sortValue, 2);
			}
		},
		delDataByTblNameApi(tblName, code) {
			let dataJosn = {
				tblName: tblName,
				code: code,
			};
			delDataByTblName(dataJosn)
				.then((res) => {
					if (res.data.code != 0) {
						this.$alert(res.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return;
					}
					// this.$message.success("Success");
					// this.getDataByTblNameApi(this.tblName, "", "");
					this.getDataByTblNameApi(
						this.tblName,
						this.codeValue,
						this.optionsChildValue
					);
				})
				.catch(() => { })
				.finally(() => {
					this.activeBtn = null;
				});
		},
		async updDataTableClick(isCommitFn = false) {

			let dataJosn = {
				type: 1
			}
			let res = await GetEquipVerify(dataJosn);
			if (res.data.code == 451) {
				this.$confirm(res.data.msg, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				}).then(() => {
					let updData = [];
					this.tableData.forEach((item) => {
						updData.push({
							codAbrv: item.codAbrv,
							codName: item.codName,
							codOrdr: parseInt(item.codOrdr),
							codSymb: item.codSymb,
							code: item.code,
							isDel: item.isDel,
							tblName: item.tblName,
						});
					});
					console.log(updData);
					updDataByTblName(updData)
						.then((res) => {
							if (!res) {
								// this.getDataByTblNameApi(this.tblName, this.codeValue, this.optionsChildValue);
								return
							}
							if (res.data.code == -999) {
								this.$alert(this.$t("message.environmentSetting.tip.addError"), '', {
									confirmButtonText: 'OK',
									type: 'warning',
								});
								return;
							}
							if (res.data.code != 0) {
								this.$alert(res.data.msg, '', {
									confirmButtonText: 'OK',
									type: 'warning',
								});
								return;
							}
							this.$message.success(res.data.msg);
							if (isCommitFn) {
								this.$store.state.isCurrentFn();
								this.$store.commit("reSetIsCurrent");
							}
						})
						.catch(() => {
						}).finally(() => {
							// this.getDataByTblNameApi(this.tblName, this.codeValue, this.optionsChildValue);
						})
				}).catch(() => {
					if (isCommitFn) {
						this.$store.state.isCurrentFn();
						this.$store.commit("reSetIsCurrent");
					}
				});
			}
		},
		// 不可选中的
		selectable({ row }) {
			return row.isDel;
		},
		checkCodOrdr(row) {
			if (!row.codOrdr) {
			}

			console.log(row.codOrdr);
		},
		isnumber(val) {
			val = val.replace(/[^0-9]/gi, "");
			// 此处还可以限制位数以及大小
			return val;
		},
	},
	async created() {
		await this.getClassifyApi();
		this.acitveItem = 0;
		this.caption = this.classify_arr[0].caption;
		this.clsName = this.classify_arr[0].clsName;
		this.tblName = this.classify_arr[0].tblName;
		this.getDataByTblNameApi(this.tblName, "", "");
	},
	mounted() {
		let _this = this;
		this.tableHeight = $(".right-table").height() - 121;
		this.$nextTick(function () {
			window.addEventListener(
				"resize",
				() => {
					return (() => {
						_this.tableHeight = $(".right-table").height() - 121;
					})();
				},
				false
			);
		});
	},
	beforeDestroy() { },
	destroyed() { },
	updated() {
		// 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
		var elements = document.querySelectorAll('.elx-cell--checkbox');

		// 遍历这些元素  
		elements.forEach(function (element) {
			// 修改每个元素的title属性  
			element.setAttribute('title', '');
		})
	},
};
</script>
<style lang="scss" scoped>
.Term {
	height: 100%;
	padding-left: 32px;
	position: relative;

	.title {
		width: 100%;
		height: 32px;
		border-bottom: 1px solid #d8d8d8;
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10px;
		}
	}

	.tabs-view {
		width: 100%;
		padding: 16px 0;

		button {
			width: 160px !important;
			margin: 0;
			border-radius: 0;
		}
	}

	.tab-title {
		width: 200px;
		height: 32px;
		background: #ffffff;
		border: 1px solid #dee0e3;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
		color: #1f2329;
		border-right: 0 none;
		transition: 0.5s;
	}

	.active-style {
		background: #106ebe;
		color: #ffffff;
	}

	.tab-title:nth-child(1) {
		border-radius: 4px 0 0 4px;
	}

	.tab-title:nth-child(5) {
		border-right: 1px solid #dee0e3;
		border-radius: 0 4px 4px 0;
	}

	.tab-content {
		width: 100%;
		height: calc(100% - 96px);
	}

	.content {
		width: 100%;
		height: calc(100% - 140px);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left-list {
			width: 240px;
			height: 100%;
			border: 1px solid #c3c3c3;

			.list-title {
				width: 100%;
				height: 30px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #dddddd;
				background: rgba(33, 61, 73, 0.05);

				.num-left {
					border-right: 1px solid #dddddd;
					width: 30px;
					height: 30px;
					text-align: center;
					line-height: 30px;
				}

				.name {
					width: calc(100% - 30px);
					line-height: 30px;
					text-align: center;
				}
			}

			.list-content {
				width: 100%;
				height: calc(100% - 30px);
				overflow: hidden;
				overflow-y: auto;

				.item {
					width: 100%;
					height: 24px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 1px solid #dddddd;
					background: #fff;
					transition: 0.5s;
					cursor: pointer;

					.num-left {
						border-right: 1px solid #dddddd;
						width: 30px;
						height: 24px;
						text-align: center;
						line-height: 24px;
					}

					.name {
						width: calc(100% - 30px);
						line-height: 24px;
						padding-left: 16px;
					}
				}

				.item:hover {
					background: #ffffe1;
				}

				.active-item {
					background: #ffffe1;
				}
			}
		}

		.right-table {
			position: relative;
			background: #fff;
			position: relative;
			width: calc(100% - 264px);
			height: 100%;

			.right-table-title {
				position: relative;
				width: 100%;
				height: 44px;
				padding-bottom: 12px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: rgb(248, 248, 248);

				.input-wrapper {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				::v-deep .el-input {
					width: 240px;
					// height: 32px;
					// background: #ffffe1;
				}

				::v-deep .el-input__inner {
					width: 240px;
					height: 32px;
					background: #ffffe1;
				}

				::v-deep .el-cascader .el-input__inner {
					width: 240px;
					height: 32px;
					background: #fff;
					margin-left: 16px;
				}

				.ipt {
					margin-left: 24px;

					::v-deep .el-input__inner {
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 32px;
					}
				}

				.btn-wrapper {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 68px;
						height: 32px;
						// border: 1px solid #d9d9d9;
						margin-left: 16px;
					}

					button:nth-child(1) {
						width: 32px;
						font-size: 18px;
					}

					button:nth-child(2) {
						width: 32px;
						font-size: 18px;
					}

					.active-button {
						background: #106ebe;
						color: #ffffff;
					}
				}
			}

			.footer {
				padding: 0 12px;
				// position: absolute;
				// left: 0;
				// bottom: 45px;
				width: 100%;
				height: 32px;
				background: #edeeef;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.message-wrapper {
				display: flex;
				align-items: center;

				p {
					min-width: 60px;
					margin-right: 12px;
				}
			}

			.table-input {
				::v-deep .el-input__inner {
					background: none;
					border: 0 none;
					padding: 0;
				}
			}
		}
	}

	.footer-wrapper {
		width: 100%;
		position: absolute;
		left: 0px;
		bottom: 0px;
		height: 47px;
		display: flex;
		align-items: center;
		background: rgb(248, 248, 248);

		button {
			padding: 0 12px;
			min-width: 123px;
			height: 32px;
			// background: #ffffff;
			// border: 1px solid #d9d9d9;
			text-align: center;
			line-height: 32px;
			margin-right: 16px;
		}

		.okBTn {
			// background: #106ebe;
			// color: #fff;
		}
	}
}



::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
	border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
	box-shadow: none;
}

::v-deep .elx-table .is--checked.elx-cell--checkbox .elx-checkbox--icon:before,
::v-deep .elx-table .is--indeterminate.elx-cell--checkbox .elx-checkbox--icon:before,
::v-deep .is--checked.elx-table--filter-option .elx-checkbox--icon:before,
::v-deep .is--indeterminate.elx-table--filter-option .elx-checkbox--icon:before {
	background: #106ebe;
	border-color: #106ebe;
}

::v-deep .el-color-picker__icon {
	display: none;
}

::v-deep .el-color-picker--mini .el-color-picker__trigger {
	padding: 0;
}

::v-deep .el-radio-button {
	height: 36px;
	width: 238px;
}

::v-deep .el-radio-button__inner {
	width: 100%;
	height: 100%;
	line-height: 12px;
}
</style>